<template>
  <div class="flex">
    <InputNumber
      :disabled="data.schema.dynamicDisabled"
      v-model:value="source"
      placeholder="请输入模块ID"
    />
    <AButton type="primary" @click="handleSearch"> 查询可用模块ID </AButton>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { InputNumber, Button as AButton } from 'ant-design-vue';
  // import { propTypes } from '/@/utils/propTypes';

  import { useMessage } from '/@/hooks/web/useMessage';
  import { searchModuleID } from '/@/api/admin/menu';

  interface ModuleFieldItem {
    field: string;
    values: Recordable;
    model: Recordable;
    schema: Recordable;
  }

  export default defineComponent({
    name: 'InputModuleID',
    components: { InputNumber, AButton },
    props: {
      data: {
        type: Object as PropType<ModuleFieldItem>,
        require: true,
        default: () => ({}),
      },
    },
    setup(props) {
      const source = computed({
        get() {
          return props.data.model[props.data.field];
        },
        set(v) {
          props.data!.model[props.data.field] = v;
        },
      });
      const { createInfoModal } = useMessage();
      const handleSearch = async () => {
        const content = await searchModuleID();
        createInfoModal({
          title: '提示',
          width: '500px',
          content,
        });
      };
      return {
        source,
        handleSearch,
      };
    },
  });
</script>
<style lang="less" scoped></style>
